<html>
  <head>
    <script type="application/javascript">
      function draw() {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        // Create a new path with a rect
        var p1 = new Path2D();
        p1.rect(0, 0, 100, 100);

        // Create another path with a rect
        var p2 = new Path2D();
        p2.rect(0, 0, 100, 100);

        // Create transformation matrix that moves vertically 300 points to the right
        var m = document
          .createElementNS("http://www.w3.org/2000/svg", "svg")
          .createSVGMatrix();
        m.a = 1;
        m.b = 0;
        m.c = 0;
        m.d = 1;
        m.e = 200;
        m.f = 0;

        // add the second path to the first path
        p1.addPath(p2, m);

        // Finally, fill the first path onto the canvas
        ctx.fill(p1);
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
</html>
